<template>
  <el-dialog :model-value="visible" draggable :close-on-click-modal="false" title="添加平台客户选择运输方式" @close="handleClose" align-center destroy-on-close width="800px">
    <div class="search mb-4 mt-4 flex">
      <SelectPlatformSiteShop
        multiple
        ref="SelectPlatformSiteShopRef"
        :platformMultiple="1"
        :showRule="[true, false, false]"
        v-model:site="form.site"
        v-model:platform="form.platform"
        v-model:shop="form.shop"
      />

      <SelectCountry placeholder="国家" multiple collapseTags v-model:modelValue="form.site" valueKey="country" labelKey2="site_code" style="width: 200px" />
      <el-input placeholder="平台运输方式" clearable v-model="form.description" class="w-40 mr-12 h-full" />
      <el-button type="primary" @click="handleSearch()">查询</el-button>
    </div>
    {{ selectIds }}
    <vxe-table
      ref="tableRef"
      row-id="id"
      :checkbox-config="checkboxConfig"
      :height="300"
      :column-config="{ resizable: true }"
      :row-config="{ keyField: 'id', isHover: true }"
      :data="tableData"
      :radio-config="radioConfig"
    >
      <vxe-column v-if="multiple" type="checkbox" width="50" />
      <vxe-column v-else type="radio" width="50" />
      <vxe-column title="平台" field="platform" />
      <vxe-column title="平台" field="id" />
      <vxe-column title="国家" field="site" />
      <vxe-column title="运输方式" field="description" />
    </vxe-table>
    <template #footer>
      <vxe-pager
        :border="false"
        perfect
        v-model:current-page="pager.currentPage"
        v-model:page-size="pager.pageSize"
        :total="pager.totalResult"
        :page-sizes="[10, 20, 100]"
        @page-change="pageChange"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      >
      </vxe-pager>
      <div>
        <!-- <el-button @click="aaa">aaa</el-button> -->
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleDialogOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import api from "./api"
import SelectPlatformSiteShop from "@/components/Selects/SelectPlatformSiteShop/index.vue"
import SelectCountry from "@/components/Selects/SelectCountry/index.vue"
const emit = defineEmits(["update:modelValue", "submit"])
import { ElMessage } from "element-plus"
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  selectIds: {
    type: Array,
    default: () => [],
  },
})

const SelectPlatformSiteShopRef = ref()
const tableData = ref([])
const tableRef = ref([])
const pager = reactive({
  totalResult: 1,
  currentPage: 1,
  pageSize: 10,
})
const data = reactive({
  form: {
    platform: [],
    site: [],
    shipping_method: null,
  },
})

const { form } = toRefs(data)

const initData = (query = {}) => {
  // , ids: [1382, 1381]
  api.apiGetShippingMethods({ ...query }).then(({ total, data: list }) => {
    tableData.value = list
    pager.totalResult = total
    if (query.pageNumber) {
      pager.pageNum = query.pageNum
      pager.pageSize = query.pageSize
    }
  })
}

const pageChange = () => {
  handleSearch(pager.currentPage)
}

const radioConfig = reactive({
  reserve: true,
  checkMethod({ row }) {
    const { selectIds = [] } = props
    return !selectIds.includes(row.sku)
  },
})

const checkboxConfig = reactive({
  reserve: true,
})

watch(
  () => props.selectIds,
  (list) => {
    checkboxConfig.checkRowKeys = list
  },
  { deep: true, immediate: true }
)

const handleClose = () => {
  emit("update:visible", false)
}

const handleSearch = (pageNum = 1) => {
 if(pageNum == 1 ) pager.currentPage = 1
  const params = SelectPlatformSiteShopRef.value.getSelectedData()
  const { platform, site } = params
  const dtd = {
    platform: platform.length ? platform[0].platform_code : "",
    site: form.value.site,
    // site: site.map(v => v.site_code),
    description: form.value.description,
  }
  initData({ pageNum, pageSize: pager.pageSize, ...dtd })
}
const aaa = () => {
  // const checkedRecords = tableRef.value.getCheckboxRecords(true)
  // console.log(checkedRecords)
  console.log(tableRef.value.getCheckboxReserveRecords())
  console.log(tableRef.value.getCheckboxRecords())
}
const handleDialogOk = () => {
  let ReserveRecords = tableRef.value.getCheckboxReserveRecords()
  let checkedRecords = tableRef.value.getCheckboxRecords()

  checkedRecords = [...checkedRecords, ...ReserveRecords]
  if (!checkedRecords.length) {
    return ElMessage({ message: "最少选中一条数据！", type: "error" })
  }

  emit("submit", checkedRecords)
  handleClose()
}

onMounted(() => {
  initData()
})
</script>

<style scoped lang="scss"></style>
